<template>
    <view>
      <view class="section-title">{{ title }} </view>
      <view class="card-row">
        <view
          class="card yellow"
          v-for="(item, idx) in list"
          :key="idx"
          @click="goCategory(item)"
        >{{ item.target_detail.category_name }}</view>
      </view>
      
    </view>
</template>
  
  <script>


  // 引用 tools-common.js
  // 由于 require 在 vue3/uniapp 中不可用，需使用 import 语法


  import toolsCommon from '@/common/tools/tools-common';


  export default {
    name: 'TmpCategoryModule1',
    props: {
      title: String,
      list: Array,
      colorData: String // yellow/blue/gray/green
    },
    methods: {
      goCategory(item) {
        // 允许多种数据结构，尽可能从 item 中提取参数
        const td = item && item.target_detail ? item.target_detail : {};
        const options = {
          typeCode: item.typeCode || td.category_type || '',
          firstCode: item.firstCode || td.category_code || '',
          secondCode: item.secondCode || ''
        };
        toolsCommon.goPageCategory(options);
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>

	  
  .section-title {
	  height: 100rpx;
    font-size: 28rpx;
    font-weight: bold;
	// color: $uv-main-color;
   // color:  $uv-primary;
	  //color:  $rlj-bg-color;
/* 	color: red; */
/*    margin: 32rpx 0 16rpx 32rpx; */
	align-items: center;
  display: flex;
  /*justify-content: center; */
	//padding-left: 24rpx;
  }
  
  .card-row {
    display: flex;
    flex-wrap: wrap;
    //margin: 0 24rpx 16rpx 24rpx;
    gap: 24rpx 24rpx;
  }
  
  .card {
    flex: 1 1 28%;
    min-width: 180rpx;
    max-width: 32%;
    padding: 32rpx 0;
    border-radius: 20rpx;
    text-align: center;
    font-size: 26rpx;
    // font-weight: 500;
    box-shadow: 0 4rpx 12rpx 0 rgba(36,104,242,0.04);
  }
  
  .card.yellow { background: #FFF3A3; color: #333; }
  .card.blue { background: #7B8DBA; color: #fff; }
  .card.gray { background: #E3E5E8; color: #333; }
  .card.green { background: #AEE6D2; color: #333; }

  </style>